import { PageContainer } from '@ant-design/pro-components';
import { request } from '@umijs/max';
import { Image, List, message, Select } from 'antd';
import React, { useState } from 'react';

/**
 * 主页
 * @constructor
 */
const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [photos, setPhotos] = useState([]);
  const [selectValue, setSelectValue] = useState(3);

  const loadData = async (type: number) => {
    setSelectValue(type);
    setLoading(true);
    try {
      const res = await request(`/api/photo/get`, {
        method: 'GET',
        params: {
          photoType: type,
        },
        headers: {
          token: localStorage.getItem('token'),
        },
      });
      setPhotos(res.data);
    } catch (error: any) {
      message.error('请求失败，' + error.message);
    }
    setLoading(false);
  };

  return (
    <PageContainer title="历史图片" loading={loading}>
      <Select
        style={{ width: 220 }}
        onChange={(type) => loadData(type)}
        value={selectValue}
        options={[
          { value: 3, label: '请选择', disabled: true },
          { value: 0, label: '检测的图片' },
          { value: 1, label: '用于训练的图片' },
          { value: 2, label: '识别后的图片' },
        ]}
      />
      <List
        itemLayout="horizontal"
        dataSource={photos}
        renderItem={(item) => (
          <List.Item>
            <Image src={item.url} />
          </List.Item>
        )}
      />
    </PageContainer>
  );
};

export default Index;
